<template>
  <div>
    <Echart
      id="centreLeft1Chart"
      :options="options"
      height="320px"
      width="100%"
    />
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {},
      // 定义颜色
      colorList: {
      }
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
            // text: newData,
            text: '',
            textStyle: {
              color: '#D3D6DD',
              fontSize: 24,
              fontWeight: 'normal'
            }
          },
          legend: {
            top: 120,
            right: 10,
            orient: 'vertical',
            itemGap: 15,
            itemWidth: 12,
            itemHeight: 12,
            data: ['目标', '实际'],
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            x: '9%',
            width: '86%',
            y: '4%'
          },
          xAxis: {
            type: 'category',
            position: 'bottom',
            axisLine: true,
            axisLabel: {
              color: 'rgba(255,255,255,.8)',
              fontSize: 12
            },
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00']
          },
          // 下方Y轴
          yAxis: {
            type: 'value',
            axisLine: false,
            min: 9.7,
            max: 10.1
          },
          series: [
            {
              name: '目标',
              type: 'line',
              data: [9.81, 9.81, 9.81, 9.81, 9.81, 9.81]
            },
            {
              name: '实际',
              type: 'line',
              data: [10.1, 9.825, 9.835, 9.805, 9.81, 9.83]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
